@import "../../assets/css/base.scss";

.sunProgress {
    position: relative;
    width: 100%;
    height: 2px;
    padding: 9px 0;
    margin: 0 10px;
    user-select: none;
    & .sunProgress-bar {
        height: 2px;
        width: 100%;
        background-color: $sunProgress-bar;
    }
    & .sunProgress-outer {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 0;
        height: 2px;
        margin-top: -1px;
        background-color: $sunProgress-outer;
    }
    & .sunProgress-inner {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 0;
        height: 2px;
        transform: translateY(-50%);
        background-color: $theme-bg;
        //小圆点
        .sunProgress-dot {
            position: absolute;
            top: 50%;
            right: -10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            transform: translate3d(0,-50%,0);
            background-color: $sunProgress-dot-outer;
            &:after {
                content : '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: $sunProgress-dot-inner;
                transform: translate3d(-50%,-50%,0);
            }
        }
    }
}
